<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能网络创新实验室</title>
    <link rel="shortcut icon" href="images/acnl-logo-blue.png">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/loader.js"></script>

    <style>
        .mainform {
            min-height: calc(100vh - 64px - 120px);
        }
        .mainform aside {
            display: inline-block;
            vertical-align: top;
        }
        .mainform aside ul {
            list-style: none;
            padding-left: 1rem;
            padding-top: 2rem;
        }
        .mainform #persons {
            display: inline-flex;
            vertical-align: top;
            flex-wrap: wrap;
            width: 900px;
        }
        .student {
            flex: 0 0 auto;
            width: 420px;
            margin: 20px 0px 30px 20px;
        }
        .student::before {
            content: "";
            background-image: var(--person-photo);
            width: 120px;
            height: 120px;
            display: inline-block;
            background-size: 120px auto;
        }
    </style>

    <template id="TemStudent">
        <div class="student">
            <span>{{姓名}} <span style="font-size: 12px;">{{时间}}</span></span>
            <span>{{研究方向}}</span>
            <span>{{联系方式}}</span>
            <span>个人主页：{{个人主页}}</span>
        </div>
    </template>
</head>
<body>
    <header id="header-top"></header>

    <div class="mainform">
        <aside class="plist" style="background-color: azure; width: 8rem; height: 100%;">
            <ul>
                <li>指导团队</li>
                <li>硕士研究生</li>
                <li>本科生</li>
            </ul>
        </aside>
        <div id="persons">
            
        </div>
    </div>

    <footer id="footer-bottom">
        <div class="container">
        <div class="copyright">
            Copyright @ 2024 <br/>
            智能网络创新实验室
        </div>
        <div>
            <a>创明软件工作室</a>
            <a>智慧物联创新协会</a>
        </div>
        </div>
    </footer>

    <svg id="svg-repo" xmlns="http://www.w3.org/2000/svg" style="display: none;"></svg>

    <script>
        const eleContents = [
            { "id": "header-top", "file": "header.html" },
            { "id": "svg-repo", "file": "svg-repo.html" }
        ]
        fetchContent(eleContents);

        function binding(data, person) {
            person.innerHTML = person.innerHTML.replace(
                /{{((?:[^{}]|[\u4e00-\u9fa5])+)}}/g, 
                (match, key) => { return data[key]; }
            );
            person.style.setProperty('--person-photo', "url(" + data["头像"] + ")");
            /*添加成果展示块*/
            return person;
        }
        
        function render(data, element) {
            if (! 'content' in document.createElement('template')) {
                console.log("no support!");
                return;
            }
            for(var p in data) {
                const clone = document.importNode(document.getElementById("TemStudent").content, true);
                element.appendChild(binding(data[p], clone.children[0]));
            }
        }
        /* 获取数据，渲染页面 */
        fetch("members/persons.json")
        .then(response => response.json())
        .then(data => render(data["硕士研究生"], document.getElementById("persons")));
    </script>
</body>
</html>